import styled from "@emotion/styled";
import { Button, Divider, List, Popover, Typography } from "antd";
import React  from "react";
import { useProjectModal } from "screens/ProjectList/util";
import { useProjects } from "utils/project";
// export const ProjectPopover = (props:{setProjectModalOpen:(isOpen:boolean) => void}) =>{
export const ProjectPopover = () =>{
  const {open}=useProjectModal()
  const {data:project, refetch} = useProjects()
  const pinnedProjects = project?.filter(project => project.pin)

  const content = <ContentContainer>
    <Typography.Text type="secondary">收藏项目</Typography.Text>
    <List>
      {
        pinnedProjects?.map(project => <List.Item key={project.id}>
          <List.Item.Meta title={project.name}/>
        </List.Item>)
      }
    </List>
    <Divider />
    {/* <Button type="link" onClick={() => props.setProjectModalOpen(true)}>创建项目</Button> */}
    <Button type="link" onClick={open}>创建项目</Button>
  </ContentContainer>
  return <Popover onVisibleChange={()=> refetch() } placement={"bottom"} content={content}>
    <span>项目</span>
  </Popover>
}

const ContentContainer = styled.div`
  min-width: 30rem;
`